<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">

<head>
    <title>景区列表</title>
    <%@include file="../common/common.jsp"%>
</head>

<body>
<!-- Fixed navbar -->
<%@include file="../common/navBarTop.jsp"%>
<div class="container-fluid" >
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="row" id="root">
                <div style="padding: 15px">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="title">标题：</label>
                        <input type="text" class="form-control" v-model="title" name="title" id="title">
                    </div>
                    <div class="form-group">
                        <label for="star">星级：</label>
                        <select class="form-control" name="star" id="star" v-model="star">
                            <option value="0">请选择</option>
                            <option value="A">A</option>
                            <option value="AA">AA</option>
                            <option value="AAA">AAA</option>
                            <option value="AAAA">AAAA</option>
                            <option value="AAAAA">AAAAA</option>
                        </select>
                    </div>

                    <button type="button" class="btn btn-info" @click="getData()" id="btnSelect">
                        <span class="glyphicon glyphicon-search"  aria-hidden="true"></span>查询
                    </button>

                </form>
                </div>
                <div class="col-md-8">
                    <ul class="list-group">
                        <li class="list-group-item" v-for="(item,index) in pageData.pageList">
                            <div class="row">
                                <div class="col-md-9">
                                    <div class="media">
                                        <div class="media-left media-middle">
                                            <a href="#">
                                                <img class="media-object" :src="'<%=path%>/'+item.coverPic"
                                                     style="max-width: 100px;max-height: 100px;" alt="...">
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h3 class="media-heading text-center">{{item.mainTitle}}</h3>
                                            <p>地址：{{item.address}}</p>
                                            <p>星级：{{item.star}}</p>
                                            <p>电话：{{item.phone}}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <p class="price">{{item.price}}</p>
                                    <div style="margin-top: 25px;">
                                        <a class="btn btn-success" :href='"<%=path%>/pages/scenic_spot/detail.jsp?id="+item.id' target="_blank">详细信息</a>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <div data-spy="affix" data-offset="90">
                        <img class="media-object" src="<%=path%>/assets/img/gg.png"
                             style="max-width: 450px;max-height: 550px;" alt="...">
                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-8 col-md-offset-2">
            <nav aria-label="Page navigation">
                <ul id="pageLimit"></ul>
            </nav>
        </div>
    </div>
    <%@include file="../common/userLoginModal.jsp"%>
</div>
<%@include file="../common/navBarBottom.jsp"%>
</body>
<script type="text/javascript">
    var ti='<%=request.getAttribute("title")%>';
    var st='<%=request.getAttribute("star")%>';
    var app = new Vue({
        el: '#root',
        data() {
            return {
                pageData: {
                    pageList:null,
                    totalCount:0
                },
                title:ti==="null" ? "" : ti,
                star:st==="null" ? "0" : st,
            }
        },
        methods:{
            async getData() {
                var param={
                    "offset":0,
                    "pagesize":10,
                    "title":this.title,
                    "star":this.star
                };
                var url=CONTEXT_PATH+'/ScenicSpot/pageList';
                const { data: res }=  await axios.post(url,param);
                this.pageData = res;
                this.initPageLimit()
            },
            initPageLimit(){
                var totalPageNum = (this.pageData.totalCount +10 - 1) / 10;
                var $this=this;
                $('#pageLimit').bootstrapPaginator({
                    //currentPage: 1,//当前页。
                    totalPages: totalPageNum,//总页数。
                    //numberOfPages: 5,//显示的页数
                    size: "normal",//应该是页眉的大小。
                    bootstrapMajorVersion: 3,//bootstrap的版本要求。
                    alignment: "right",
                    //如下的代码是将页眉显示的中文显示我们自定义的中文。
                    itemTexts: function (type, page, current) {
                        switch (type) {
                            case "first": return "首页";
                            case "prev": return "上一页";
                            case "next": return "下一页";
                            case "last": return "末页";
                            case "page": return page;
                        }
                    },
                    //给每个页眉绑定一个事件，其实就是ajax请求，其中page变量为当前点击的页上的数字。
                    onPageClicked: function (event, originalEvent, type, page) {
                        var param={
                            "offset":(page-1)*10,
                            "pagesize" : 10,
                            "title":this.title,
                            "star":this.star
                        };
                        //alert(page);
                        //this.getData(offset,pageSize);
                        $.ajax({
                            url: CONTEXT_PATH+'/ScenicSpot/pageList',
                            type: 'post',
                            data:JSON.stringify(param),
                            dataType: 'JSON',
                            contentType: "application/json",
                            success: function (callback) {
                                $this.pageData=callback;
                            }
                        })
                    }
                });
            }
        },
        mounted:function(){
            this.getData();
        },
    })
</script>
</html>
